import React from 'react'
import _ from 'underscore'
import format from 'lib/util/format'
import GridWidget from 'lib/components/GridWidget.jsx'

export default class CrashNameGrid extends GridWidget {
  constructor(props){
    super(props)
  }
  renderBody(){
    // debugger
    if(this.props.store.data&&this.props.store.data.length){
      // console.log( this.props.store.data );
      // debugger
      return _(this.props.store.data).chain()
      .map((row,ind) => ({
        el:this.renderRow(row,ind),
        data:row
      }),this)
      .groupBy((rowPair) => rowPair.data.crashType)
      .mapObject((lvl1Rows,lvl1Name) => {
        // debugger
        return _(lvl1Rows).chain()
        .reduce((rows,newRow) => {
          if(!rows.length){
            newRow.el.props.children[0] = React.cloneElement(newRow.el.props.children[0],{
              rowSpan:lvl1Rows.length
            })
          }else{
            newRow.el = React.cloneElement(newRow.el,{},newRow.el.props.children.slice(1))
            newRow.sliced = true
          }
          return rows.concat([newRow])
        },[])
        .groupBy((rowPair) => rowPair.data.crashCodeInfo)
        .mapObject((lvl2Rows,lvl2Name) => {
          return _(lvl2Rows).chain()
          .sortBy((r) => r.el.props.children.length*(-1))
          .reduce((rows,newRow) => {
            var lvl2Ind = newRow.sliced?0:1
            if(!rows.length){
              newRow.el.props.children[lvl2Ind] = React.cloneElement(newRow.el.props.children[lvl2Ind],{
                rowSpan:lvl2Rows.length
              })
            }else if(newRow.sliced){
              newRow.el = React.cloneElement(newRow.el,{},newRow.el.props.children.slice(1))
            }else{
              newRow.el = React.cloneElement(newRow.el,{},newRow.el.props.children.slice(0))
            }
            return rows.concat([newRow.el])
          },[]).value()
        },this)
        .values()
        .value()
      },this)
      .values()
      .flatten(true)
      .value()
    }else{
      return super.renderBody()
    }
  }
}
CrashNameGrid.defaultProps = _.extend({},GridWidget.defaultProps,{
  // extraClassName:'table-layout no-hover full-border vertical-top',
  extraClassName:'full-border no-hover vertical-top',
  oddColor:false,
  cols:[
  {
    title:'崩溃类型',
    // width:243,
    containerStyle: {
      minWidth: 105,
      maxWidth: 200
    },
    key:'crashType'
  }, {
    title:'代码信息',
    // width:400,
    containerStyle: {
      minWidth: 105,
      maxWidth: 550
    },
    key:'crashCodeInfo'
  }, {
    title:'代码位置',
    // width:70,
    containerStyle: {
      minWidth: 33
    },
    key:'crashCodeIndex',
    render:function(fmtVal,rowData){
      return (
        <a className="link-in-list" href={'crashlog#/crashtrace/'+rowData.crashNameId}>
          {fmtVal}
        </a>
      )
    }
  }, {
    title: '崩溃等级',
    key: 'crashLevel',
    render: function(fmtVal, row) {
      let className = '';

      // fmtVal = Math.floor(Math.random() * 10) % 5;
      fmtVal = parseInt(fmtVal);

      switch(fmtVal) {
        case 0:
          className = 'progress-bar-info';
          break;
        case 1:
          className = 'progress-bar-success';
          break;
        case 2:
          className = 'progress-bar-alert';
          break;
        case 3:
          className = 'progress-bar-warning';
          break;
        case 4:
          className = 'progress-bar-danger';
          break;
      }

      return (
        <div key={ fmtVal } className={`progress ${ className }`} data-tip={`Level ${ fmtVal + 1 }`}>
          <div className="progress-bar" style={{width: `${ (fmtVal + 1) * 20 }%`}}></div>
        </div>
      );
    }
  }, {
    title:'首次发生时间',
    // width:100,
    key:'firstTime',
    containerStyle: {
      minWidth: 43
    },
    sortable:true,
    formatter:format.stampToTime

  },{
    title:'最后发生时间',
    // width:100,
    key:'lastTime',
    containerStyle: {
      minWidth: 43
    },
    sortable:true,
    formatter:format.stampToTime
  },{
    title:'应用版本',
    // width:100,
    containerStyle: {
      minWidth: 33
    },
    sortable:true,
    key:'appVersion',
    formatter:function (v) {
      return <span style={{'wordBreak':'break-word'}}>{v}</span>;
    }
  },{
    title:'发生次数',
    // width:100,
    containerStyle: {
      minWidth: 28
    },
    sortable:true,
    key:'count',
    formatter:format.integer
  },{
    title:'影响设备',
    sortable:true,
    // width:100,
    containerStyle: {
      minWidth: 28
    },
    key:'affected',
    formatter:format.integer
  },{
    title:'状态',
    sortable:true,
    // width:70,
    containerStyle: {
      minWidth: 28
    },
    key:'fixed',
    formatter:function(v){
      return v?'已解决':'未解决'
    }
  },{
    title:'优先级',
    sortable:true,
    // width:70,
    containerStyle: {
      minWidth: 28
    },
    key:'follow',
    formatter:function(v){
      return v?'高':'低'
    }
  }]
})
